/**
 * shuang
 */

import React,{Component}from 'react';
import{Platform,
  View,
  Text,
  ScrollView,
  Image,
  Dimensions,
  StyleSheet,
  AppRegistry, TouchableOpacity,
  SectionList,
    FlatList
} from 'react-native';
import CommonStyle from '../../Component/CommonStyle'

const screenWidth = Dimensions.get('window').width;

var list=[1,2,3,4,5,6,7]
export default class BBSListCell extends Component{
    constructor(props) {
    super(props);

  }
    _onPress=()=>{
        this.props.onPress();
    }

    _renderItem = ({item,index}) =>(
        <TouchableOpacity onPress={()=>{
            this.props.OnImagePress(index);
        }}>
            <Image source = {{uri:item.imgUrl}}  style = {{width:85,height:85,marginLeft:1}} />
        </TouchableOpacity>
    );
    _keyExtractor = (item, index) => item;
  render() {
    return (
        <View style={[styles.wholeItem,this.props.style]}>
         <TouchableOpacity onPress={this._onPress} activeOpacity={1} focusedOpacity={1} >
                <View style={styles.container1} flexDirection='row'>
                   <Image source = {{uri:this.props.newsItem.headerPic}} style = {styles.topImgWid} />
                    <View style={{height:60,}} >
                        <Text style={styles.textWid}>{this.props.newsItem.username?this.props.newsItem.username:''}</Text>
                        <Text style={{fontSize:10,left:20,top:12,color:CommonStyle.color_light_black}}>{this.props.newsItem.createTime}</Text>
                    </View>

                    <Text style={{fontSize: 12, color: 'gray',left:30,top:12, height:18,paddingLeft:5,paddingRight:5,textAlign:'center', borderWidth:1,borderRadius:9,borderColor:'gray'}}>
                        {this.props.newsItem.level?"LV"+this.props.newsItem.level:""}
                     </Text>
                    <View style={{position:'absolute',right:15,top:16,flexDirection:'row'}}>
                        <View style={{}} flexDirection= 'row' textAlign='right'>
                          <Image source = {require('./picImages/my_pinglun.png')} style = {{ width: scaleSizeToFit(15), height: scaleSizeToFit(15) ,top:6}} />
                          <Text style={{left:3,top:1,fontSize:scaleSizeToFit(14),color:CommonStyle.color_black}}>
                              {this.props.newsItem.comments}
                              </Text>
                        </View>
                        <View style={{marginLeft:10}} flexDirection= 'row' >
                            <Image source = {require('./picImages/luntan_wojiaoxing.png')} style = {{ width: scaleSizeToFit(15), height: scaleSizeToFit(15) ,top:6}} />
                            <Text style={{left:3,top:1,fontSize:scaleSizeToFit(14),color:CommonStyle.color_black}}>{this.props.newsItem.collects}</Text>
                        </View>
                    </View>
                 </View>

                 <View style={{height:50,width:screenWidth,backgroundColor:'#fff'}} >
                    <Text style={{fontSize:scaleSizeToFit(14),color:CommonStyle.color_black,left:20,top:0,color:'#3C4959',width:screenWidth-40,lineHeight:22,}}numberOfLines={2} >
                        {this.props.newsItem.subContent}
                        </Text>
                </View>

                    <FlatList
                        style={styles.flatlist}
                        data={this.props.newsItem.forumImgs}
                        renderItem={this._renderItem}
                        keyExtractor={this._keyExtractor}
                        horizontal={true}

                    />

                <View style={{height:20,width:screenWidth,margintop:10,marginBottom:10}} flexDirection = 'row' >
                         <Text style={{fontSize:12,color:'#3C4959',marginLeft:15}} >
                             来自
                            <Text style={{color: 'blue',marginLeft:10}}>
                                {this.props.newsItem.channelName}
                            </Text>
                         </Text>

                    <Text style={{color: 'blue',textAlign:'right',fontSize:11,backgroundColor:'#fff',position:'absolute',right:15}} >
                        {"阅读"+this.props.newsItem.view}
                   </Text>
                </View>


            </TouchableOpacity>
    </View>
    );
  }
}
const styles = StyleSheet.create({
    wholeItem:{
        flex:1,
        backgroundColor:'white',
        marginBottom:10
    },
  container: {
    flexDirection: 'row',
     height:60,
     backgroundColor:'#fff',
  },
  oneView: {
    left:10,
    top:10,
  },
  twoView: {
   left:20,
   top:10,
    width:screenWidth - 70,
    height:40,
  },
  threeView: {
    width:screenWidth/2,
    left:screenWidth/2
  },
  fourView: {
    left:3,
    fontSize: 10,
  },container1: {
   backgroundColor:'#fff',
height:70,

  },
  topImgWid:{
    top:10,
    left:10,
    borderRadius:25,//圆角处理
    width: 50,
     height: 50 ,
  },

  textWid:{
    // width:screenWidth - 150,
    top:10,
    left:20,
    height:25,
      fontSize:14,
      color:CommonStyle.color_black
    // selectedColor:"green",
    //  buttonRadius:PropTypes.number,
    // borderWidth:PropTypes.number,
  },
    flatlist:{
        marginLeft:15,
        marginRight:15,
        marginBottom:10,
        marginTop:10
    },
});


// skip this line if using Create React Native App
// AppRegistry.registerComponent('AwesomeProject', () => SectionListBasics);

const scaleSizeToFit = (s) => {
   return s * Dimensions.get('window').width / 414;
 }